@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
    padding: $padding-y $padding-x;
    font-size: $font-size;
    border-radius: $border-radius;
}

@mixin button-style(
    $background,
    $border,
    $color,
    $hover-background: lighten($background, 7.5%),
    $hover-border: lighten($border, 10%),
    $hover-color: $color,
) {
    color: $color;
    background: $background;
    border-color: $border;

    &:hover {
        color: $hover-color;
        background: $hover-background;
        border-color: $hover-border;
    }

    &:focus,
    &.focus {
        color: $hover-color;
        background: $hover-background;
        border-color: $hover-border;
    }

    &:disabled,
    &.disabled {
        color: $color;
        background: $background;
        border-color: $border;
    }
}

@mixin zoom-animation($direction: 'top',
    $scaleStart: scaleY(0),
    $scaleEnd: scaleY(1),
    $origin: center top,
) {
    .zoom-in-#{$direction}-enter {
        opacity: 0;
        transform: $scaleStart;
    }

    .zoom-in-#{$direction}-enter-active {
        opacity: 1;
        transform: $scaleEnd;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
        transform-origin: $origin
    }

    .zoom-in-#{$direction}-exit {
        opacity: 1;
    }

    .zoom-in-#{$direction}-exit-active {
        opacity: 0;
        transform: $scaleStart;
        transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
        transform-origin: $origin;
    }
}

@mixin border-right-radius($radius) {
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
}

@mixin border-left-radius($radius) {
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
}